<template>
  <div class="did-h">
    <div class="black black-h">
      <div>通过凭证哈希验证凭证存证，可支持传入公钥。</div>
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="6">
          <el-form label-position="right" :rules="rules" ref="ruleForm" label-width="100px" :model="form">
            <el-form-item label="凭证哈希" prop="evidenceHash">
              <el-input v-model="form.evidenceHash" placeholder="请输入凭证哈希"></el-input>
            </el-form-item>
            <el-form-item label="签发者DID" prop="did">
              <el-input v-model="form.did" placeholder="请输入签发者的DID"></el-input>
            </el-form-item>
            <el-form-item label="公钥">
              <el-input v-model="form.publicKey" placeholder="请输入公钥（可选）"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="did-button">
        <el-button size="medium" type="primary" @click="verification">验证凭证存证</el-button>
      </div>
    </div>
    <div class="black mt1 black-height text-c">
      {{data.msg=='Success'?data.data?'验证凭证存证成功':'验证凭证存证失败':""}}
    </div>
  </div>
</template>
<script>
import NoData from '../../../components/noData.vue';
export default {
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      form: {
        evidenceHash: '',
        did: '',
        publicKey: '',
      },
      rules: {
        evidenceHash: [{ required: true, message: '请输入凭证哈希', trigger: 'blur' }],
        did: [{ required: true, message: '请输入签发者的DID', trigger: 'blur' }],
      },
      data:''
    };
  },
  mounted() {},
  methods: {
    verification() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.verificationEvidence();
        } else {
          return false;
        }
      });
    },
     async verificationEvidence() {
      this.data = '';
      let params = this.form;
      this.data = '';
      let res = await this.$http.post(this.$api.evidence.verificationEvidence, params);
      if (res.code == 200) {
        this.data = res;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
}
.black-height {
  height: calc(50% - 90px);
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.text-c{
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
</style>
